<!-- From Uiverse.io by Shubh0408  - Tags: checkbox, toggle, play, tailwind, tailwindcss -->
<label
  class="w-9 h-10 cursor-pointer flex flex-col items-center justify-center"
>
  <input class="hidden peer" type="checkbox" />
  <div
    class="w-[50%] h-[2px] bg-white rounded-sm transition-all duration-300 origin-center rotate-90 -translate-x-[0.3rem] translate-y-[0.1rem] peer-checked:translate-y-[0.1rem]"
  ></div>
  <div
    class="w-[50%] h-[2px] bg-white rounded-md transition-all duration-300 origin-center rotate-90 translate-x-[0.3rem] -translate-y-[0.05rem] peer-checked:rotate-[-30deg] peer-checked:translate-y-[0.22rem] peer-checked:translate-x-[0.15rem]"
  ></div>
  <div
    class="w-[50%] h-[2px] bg-white rounded-md transition-all duration-300 origin-center rotate-90 translate-x-[0.3rem] -translate-y-[0.16rem] peer-checked:rotate-[30deg] peer-checked:translate-y-[-0.4rem] peer-checked:translate-x-[0.15rem]"
  ></div>
</label>


    